<template>
  <div class="container-v3">
    <!-- <Row :gutter="16" class="tips-menu-v3">
      <Col span="6">
        <router-link to="">
          <div class="ac" @click.prevent="toMessage('separateservice', 1)">
            <div class="desc">
              全市通办<p>跨市区通办事项</p>
            </div>
            <div class="num">{{itemCategoryNum.separate || 0}}</div>
          </div>
        </router-link>
      </Col>
      <Col span="6">
        <router-link to="">
          <div class="nc" @click.prevent="toMessage('workbench', 2)">
            <div class="desc">
              待办事项<p>市民网络提报事项</p>
            </div>
            <div class="num">{{itemCategoryNum.remain_num || 0}}</div>
          </div>
        </router-link>
      </Col>
      <Col span="6">
        <router-link to="">
          <div class="ic" @click.prevent="toMessage('closingratelist', 0)">
            <div class="desc">
              统计报表<p>社区内工作统计</p>
            </div>
            <div class="num">{{itemCategoryNum.all_num || 0}}</div>
          </div>
        </router-link>
      </Col>
      <Col span="6">
        <router-link to="">
          <div class="gc" @click.prevent="toMessageggg">
            <div class="desc">
              社区网格<p>社区网格一张图</p>
            </div>
            <div class="num">{{itemCategoryNum.gridnum || 0}}</div>
          </div>
        </router-link>
      </Col>
    </Row> -->
    <Row :gutter="16" class="on-site-v3">
      <Col span="24" style="margin-bottom: 20px">
        <div class="user-info">
          <person-info :user-overall="userInfo"></person-info>
        </div>
      </Col>
      <Col span="24">
        <div class="opt-area-v3">
          <Tabs v-model="doItemData.searchLan">
            <TabPane label="办理事项" name="name1" icon="md-list-box">
              <my-tabs :searchname="doItemData.text" :loaduser="doItemData.loadUserInfo"
                       :cardno="userInfo.cardno" :usernname="userInfo.name"/>
            </TabPane>
            <TabPane label="已办理事项" name="name2" icon="md-checkmark-circle">
              <Table height="400" :columns="columns1" :data="todolist">
                <template slot-scope="{ row }" slot="name">
                  <a style="color: #2D8cF0;" @click="orderInfo(row)">{{ row.name }}</a>
                </template>
                <template slot="buttons" slot-scope="{ row }">
                  <Button type="success" size="small" @click="viewProcess(row)">查看进度</Button>
                </template>
              </Table>
            </TabPane>
            <TabPane label="可办理事项" name="name3" icon="md-checkmark-circle">
              <Table height="400" :columns="columns2" :data="todolist1">
                <template slot="buttons" slot-scope="{ row }">
                  <Button type="success" size="small" @click="byrowidcardo(row)">办理</Button>
                </template>
              </Table>
            </TabPane>
          </Tabs>
          <Input v-show="doItemData.searchLan == 'name1'" search placeholder="事项名称" class="search-input"
                 @on-change="searchList1" @on-search="searchList" v-model="doItemData.searchName"/>
        </div>
      </Col>
    </Row>
    <Row :gutter="16" class="on-site-v3">
      <Col span="24">
        <Card >
          <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            居民诉求
          </p>
          <div style="text-align: left">
            <Row>
              <Col span="6" v-for="(item,index) in appeaAreaList1" :key="index">
                <div @click="appeal(index)">
                  <Icon type="ios-arrow-dropright"  style="margin-right: 10px"/>
                  {{item.tittle}}
                </div>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" class="on-site-v3">
      <Col span="10">
        <Card class="notice-v3">
          <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            通知公告
          </p>
          <a href="#" slot="extra" @click.prevent="toMessage('message')" class="notice-more">查看更多</a>
          <ul>
            <li v-for="(item, index) in noticeList" v-bind:key="index" @click.prevent="toMessage('message')">
              <Icon type="ios-arrow-forward"/>
              {{item.title}}
            </li>
          </ul>
        </Card>
      </Col>
      <Col span="14">
        <Card>
          <my-chart-bar style="height: 300px;" :value="barData" :run="run" text="近七日工作量"/>
        </Card>
      </Col>
    </Row>
    <Modal
      v-model="renshecuowu"
      title="注意："
      width="800">
      <div>
        <h3>
        &nbsp;&nbsp;&nbsp;&nbsp;即日起，因省人社厅及省医保局系统改造，灵活就业人员参保登记、灵活就业人员缴费档次调整、
        企业社会化管理服务整体移交退休人员采暖费报销、退休人员社会化管理信息登记四项业务在社区暂停办理，
        申请办理业务的参保人员需到所在区社会保险分中心窗口办理，何时恢复社区经办，另行通知。请各社区做好解释说明工作。具体联系电话请查看公告信息。
        </h3>
      </div>
    </Modal>
    <process-modal ref="processModal" :modal-title="processModal.title" :dataObj="processModal.data"></process-modal>
  </div>
</template>

<script>
import './index.less'
import { MyChartBar } from '_c/charts'
import MyTabs from './components/myTabs'
import PersonInfo from './components/personInfo'
import { yiBaoToken, renSheToken, findDealableItem, date2str, teKunToken, tabcount, tabcounts, getGardenNum, getIndexCount } from '@/api/eventlist'
import { userOrderList, orderWorkCountList, releaseNoticeList } from '@/api/mainv3'
import ProcessModal from './components/process-modal'

export default {
  name: 'mainv3',
  components: {
    ProcessModal,
    MyChartBar,
    MyTabs,
    PersonInfo
  },
  data () {
    return {
      processModal: {
        title: '',
        data: {}
      },
      run: '1',
      itemCategoryNum: {},
      userInfo: { readCount: 0, cardno: '' },
      renshecuowu: false,
      doItemData: { searchLan: 'name1', loadUserInfo: false, searchName: '', text: '' },
      barData: {
        legend: ['接件量', '办结量'],
        xAxis: [],
        xAxisMap: {},
        seriesData: [
          { name: '接件量', data: [0, 0, 0, 0, 0, 0, 0], type: 'bar' },
          { name: '办结量', data: [0, 0, 0, 0, 0, 0, 0], type: 'bar' }
        ]
      },
      // 用户所有办理的事项列表
      columns1: [
        { title: '事项名称', slot: 'name', width: 170 },
        { title: '办理进度', key: 'state', width: 140 },
        { title: '办理时间', key: 'create_time', width: 170 },
        { title: '经办人（单位）', key: 'create_byname', width: 260 },
        { title: '受理人（单位）', key: 'handle_byname', width: 260 },
        { title: '办理时长', key: 'item_num', width: 140 },
        { title: '操作', align: 'center', slot: 'buttons', width: 100 }
      ],
      columns2: [
        { title: '事项名称', key: 'QL_NAME', width: 600 },
        { title: '级别', key: 'name', align: 'center', width: 150 },
        { title: '结合度', key: 'percentage', align: 'center', width: 150 },
        { title: '操作', align: 'center', slot: 'buttons' }
      ],
      todolist: [],
      todolist1: [],
      noticeList: [],
      appeaAreaList1: [
        {
          tittle: '和平区',
          value: 'd6da07b9-9571-b42c-b97a-00a02a90de52'
        },
        {
          tittle: '沈河区',
          value: 'e3fdd4fd-dbe4-648a-1965-966a1062217f'
        },
        {
          tittle: '大东区',
          value: 'ec2f95c4-4f04-d411-992f-5cff1f1f7d8e'
        },
        {
          tittle: '皇姑区',
          value: '7e87ac96-658e-e4ab-0841-53560316a64e'
        },
        {
          tittle: '铁西区',
          value: 'f1ee48cb-be2a-a4c1-cb54-4636333ad969'
        },
        {
          tittle: '于洪区',
          value: '4ce55747-7eec-7400-0b2d-56222516bbcb'
        },
        {
          tittle: '浑南区',
          value: 'e9ca80de-e4c0-f4ac-c8e4-26ca94ae4409'
        },
        {
          tittle: '沈北新区',
          value: '88b7c751-1885-049d-292b-1c3b2deab137'
        },
        {
          tittle: '苏家屯区',
          value: '77af4229-9926-d486-aa5c-73a5ecdf1607'
        },
        {
          tittle: '新民市',
          value: '5dce9df9-9e0f-c474-b8d9-8bd38fc892c7'
        },
        {
          tittle: '法库县',
          value: '976b65cc-c451-34e4-f9a3-1051d77be14e'
        },
        {
          tittle: '辽中区',
          value: 'c77df7ae-e590-5405-49e9-74a253227cfe'
        },
        {
          tittle: '康平县',
          value: 'bda153fd-d133-4455-a814-719d94c03a5f'
        }
      ]
    }
  },
  computed: {
    company_id () {
      return this.$store.state.user.severUserInfo.company_id
    },
    company_grade () {
      return this.$store.state.user.severUserInfo.company_grade
    }
  },
  methods: {
    // 居民诉求
    appeal (val) {
      var url = 'http://sy.lnxf.gov.cn/Home/EventCenter2?currRegionId='
      window.open(url + this.appeaAreaList1[val].value)
    },
    // 要办理事项
    byrowidcardo (param) {
      let itemid = param.Row_ID
      if (param.org_code === '12210100738669464Y') {
        let wumilog = {
          cardno: this.cardno,
          item_id: item.type_id,
          item_name: item.text
        }
        console.log('保存无密登录log', wumilog)
        createWumiLog(wumilog).then(ret => {})
        yiBaoToken({}).then(ret => {
          if (ret.data.data) {
            window.open(ret.data.data.url, '_blank')
          } else {
            this.$Notice.error({ title: '错误', desc: '获取链接失败，请重试' })
          }
        })
      } else if (itemid === '11210101000000MZJD5212000322000') {
        let wumilog = {
          cardno: this.cardno,
          item_id: item.type_id,
          item_name: item.text
        }
        console.log('保存无密登录log', wumilog)
        createWumiLog(wumilog).then(ret => {})
        teKunToken({}).then(ret => {
          if (ret.data.data) {
            window.open(ret.data.data.url, '_blank')
          } else {
            this.$Notice.error({ title: '错误', desc: '获取链接失败，请重试' })
          }
        })
      } else if (itemid === '11210101000000RSJD5212000287000' || itemid === '11210101000000RSJD5212000289000' ||
          itemid === '11210101000000RSJD5212000267000' || itemid === '11210101000000RSJD5212000271000') {
        let wumilog = {
          cardno: this.cardno,
          item_id: item.type_id,
          item_name: item.text
        }
        let a = 1
        let b = 1
        // 人社事项暂停!
        if (a === b) {
          this.renshecuowu = true
          return
        }
        console.log('保存无密登录log', wumilog)
        createWumiLog(wumilog).then(ret => {})
        renSheToken({}).then(ret => {
          if (ret.data.data) {
            window.open(ret.data.data.url, '_blank')
          } else {
            this.$Notice.error({ title: '错误', desc: '获取链接失败，请重试' })
          }
        })
      } else if (param.org_code === '11210101000000FCJD') {
        this.$router.push({
          name: 'house_handinformation',
          params: { itemid: item.id, cardno: this.cardno, operation: '1' }
        })
      } else if (itemid === '11210101000000MZJD5212000330000') {
        this.$router.push({
          name: 'subsistenceapplication',
          params: { cardno: this.userInfo.cardno, name: this.usernname, operation: '1' }
        })
      } else if (itemid === '11210101000000MZJD5212000328000') {
        this.$router.push({
          name: 'transregionalmigration',
          params: { cardno: this.userInfo.cardno, operation: '1' }
        })
      } else if (itemid === '11210101000000MZJD5212000173000') {
        this.$router.push({
          name: 'stopinsurance',
          params: { cardno: this.userInfo.cardno, operation: '1' }
        })
      } else {
        this.$router.push({
          name: 'handinformation',
          params: { itemid: itemid, cardno: this.userInfo.cardno, operation: '1' }
        })
      }
    },
    // 可办理事项
    findDealableItem1 (cardno) {
      findDealableItem({ 'cardno': cardno }).then(ret => {
        let data = []
        let that = this
        ret.data.data.forEach(function (temp, index) {
          let RIGHTCLASS_GERENZTTDRQ = temp.RIGHTCLASS_GERENZTTDRQ.split(',')
          let focus_group = that.userInfo.userInfo.focus_group.split(',')
          let sum = 0
          for (var i = 0; i < RIGHTCLASS_GERENZTTDRQ.length; i++) {
            for (var j = 0; j < focus_group.length; j++) {
              if (RIGHTCLASS_GERENZTTDRQ[i] === focus_group[j]) {
                sum = sum + 1
              }
            }
          }
          temp['percentage'] = (Math.round((sum / focus_group.length) * 10000) / 100).toFixed(1) + '%'
          data.push(temp)
        })
        this.todolist1 = data
      })
    },
    findNoticeList () {
      releaseNoticeList().then(ret => {
        let length = ret.data.data.length > 7 ? 7 : ret.data.data.length
        for (var i = 0; i < length; i++) {
          this.noticeList.push(ret.data.data[i])
        }
      })
    },
    toMessage (path, indexs) {
      this.$router.push({
        name: path,
        params: { tabindex: indexs }
      })
    },
    toMessageggg () {
      window.open('http://qstb.mzj.shenyang.gov.cn/grid/#/gridselectnew')
    },
    searchList1 () {
      if (!this.doItemData.searchName) {
        this.searchList()
      }
    },
    // 办理事项列表的关键字搜索
    searchList () {
      this.doItemData.text = this.doItemData.searchName
    },
    // 事项分类统计，页面上边4个框内数值
    // itemCategory () {
    //   this.itemCategoryNum = {}
    //   getCountForHome().then(ret => {
    //     this.itemCategoryNum.separate = ret.data.data.separate
    //     this.itemCategoryNum.all_num = ret.data.data.all_num
    //     this.itemCategoryNum.remain_num = ret.data.data.all_num - ret.data.data.finish_num
    //   })
    //   getCountForHome1().then(ret => {
    //     this.itemCategoryNum.gridnum = ret.data.data.num
    //   })
    // },
    // 统计每个标签页的事项数
    itemCategory () {
      this.itemCategoryNum.remain_num = 0
      this.itemCategoryNum.separate = 0
      this.itemCategoryNum.gridnum = 0
      this.itemCategoryNum.all_num = 0
      tabcount().then(res => {
        if (res.data.data) {
          res.data.data.forEach(element => {
            console.log(element.state)
            let index = element.state
            if (index === '9' || index === '0') {
              this.itemCategoryNum.remain_num += element.num
            }
          })
          this.$forceUpdate()
        }
      })
      tabcounts().then(res => {
        if (res.data.data) {
          res.data.data.forEach(element => {
            console.log(element.state)
            let index = element.state
            if (index === '8' || index === '82' || index === '7') {
              this.itemCategoryNum.separate += element.num
            }
          })
          this.$forceUpdate()
        }
      })
      let params = {}
      if (this.company_grade === 2) {
        params = {}
      } else if (this.company_grade === 3) {
        params.area_id = this.company_id
      } else if (this.company_grade === 4) {
        params.street_id = this.company_id
      } else if (this.company_grade === 5) {
        params.community_id = this.company_id
      }
      getGardenNum(params).then(res => {
        if (res.data.data) {
          this.itemCategoryNum.gridnum = res.data.data.gardennum
          this.$forceUpdate()
        }
      })
      getIndexCount().then(res => {
        console.log(res.data.data, 'aaaaaaaaa')
        if (res.data.data) {
          this.itemCategoryNum.all_num = res.data.data.num
          this.$forceUpdate()
        }
      })
    },
    // 查看进度
    viewProcess (data) {
      this.processModal.title = data.name + '- 办理进度'
      this.processModal.data = data
      this.$refs.processModal.modalAction()
    },
    orderInfo (obj) {
      if (obj.item_id === '11210101000000MZJD5212000330000') {
        this.$router.push({
          name: 'subsistenceapplication',
          params: { cardno: this.userInfo.cardno, code: obj.code, operation: '2' }
        })
      } else {
        this.$router.push({
          name: 'handinformation',
          params: {
            itemid: obj.item_id,
            cardno: this.userInfo.cardno,
            code: obj.code,
            path: 'mainv3',
            operation: '2'
          }
        })
      }
    },
    // 用户订单列表
    userOrderList (cardno) {
      let that = this
      userOrderList(cardno).then(ret => {
        let data = []
        ret.data.data.forEach(function (item, index) {
          let create_byname = item.create_byname + '(' + item.company_name + ')'
          let handle_byname = item.handle_byname + '(' + item.accept_company_name + ')'
          let item_numname = that.times(item.item_num / 60) + '小时'
          if (item.handle_byname === '' || item.handle_byname === null || item.handle_byname === undefined) {
            handle_byname = ''
          }
          let json = {
            name: item.title,
            item_id: item.item_id + '',
            code: item.code,
            state: item.process_name,
            create_time: item.create_time,
            company_name: item.company_name,
            create_byname: create_byname,
            handle_byname: handle_byname,
            item_num: item_numname
          }
          data.push(json)
        })
        this.todolist = data
      })
    },
    times (date) {
      let data = date.toString().substring(0, 3)
      if (data.endsWith('0') && data.length > 1) {
        data = data.substring(0, data.length - 1)
      }
      if (data.endsWith('.')) {
        data = data.substring(0, data.length - 1)
      }
      return data
    },
    // 首页柱状图数据接口
    orderWorkCountList () {
      let dateKu = this.barData
      orderWorkCountList().then(ret => {
        let data = ret.data
        let dat1 = []
        let dat2 = []
        let forData = dateKu.xAxisMap
        if (data.errcode === 0) {
          for (let item1 in forData) {
            let num_j = 0
            let num_b = 0
            data.data.forEach(function (item, index) {
              if (item1 === item.day) {
                num_b = item.finish
                num_j = item.receive
              }
            })
            dat1[forData[item1]] = num_b
            dat2[forData[item1]] = num_j
          }
          dateKu.seriesData = [
            { name: '接件量', data: dat2, type: 'bar' },
            { name: '办结量', data: dat1, type: 'bar' }
          ]
          this.barData = dateKu
          this.run = '2'
        }
      })
    }
  },
  watch: {
    'userInfo.readCount' (val) {
      this.doItemData.loadUserInfo = true
      this.userOrderList(this.userInfo.cardno)
      this.findDealableItem1(this.userInfo.cardno)
    }
  },
  mounted () {
    let day = new Date()
    let barData = this.barData
    for (let i = 6; i >= 0; i--) {
      let temp = date2str(day)
      barData.xAxis[i] = temp.substring(5)
      barData.xAxisMap[temp] = i
      day.setDate(day.getDate() - 1)
    }
    this.barData = barData
    this.orderWorkCountList()
    this.findNoticeList()
    this.itemCategory()
    // 每次刷新首页初始化控制用户基本信息
    this.userInfo.readCount = 0
    this.userInfo.id = ''
    this.userInfo.name = ''
    this.userInfo.cardno = ''
  }
}
</script>
